<script setup lang="ts">
import type { BusinessUIQueryColumnType } from '@/types/custom'
import { computed } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

interface Props {
  form: BusinessUIQueryColumnType
  modelValue?: string
}

const props = defineProps<Props>()

const value = computed(() => {
  return props.modelValue || props.form.set_json_parse.description
})

const getCLass = computed(() => {
  return `color-${props.form.set_json_parse.props.type}`
})
</script>

<template>
  <div class="custom-pre el-alert-pre flex flex-column">
<!--    <div v-if="form.title" class="el-alert__title with-description color-info font14">-->
<!--      <el-icon><InfoFilled /></el-icon>-->
<!--      <span class="ml5">{{ form.title }}</span>-->
<!--    </div>-->
    <div
      class="flex-grow"
      :class="getCLass"
      style="white-space: pre-wrap; line-height: 18px"
      v-html="value"
    ></div>
  </div>
</template>
<style scoped>
.custom-pre {
  align-items: start;
}
</style>
